<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmOGVkZmIyZi00MGQyLTRkOTctOGEwOC02OTY5Zjc2NmIxODkiLCJpZCI6MjMzNDY0LCJpYXQiOjE3MjMwOTQ0ODl9.lGG3RkD-fbX_pQQYCyii9zKBMjxw9qAafDPQkQm7-qo'
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, //动画小部件
    // baseLayerPicker: false, //地图图层组件
    fullscreenButton: false, //全屏组件
    geocoder: false, //地理编码搜索组件
    homeButton: false, //首页组件
    infoBox: false, //信息框
    sceneModePicker: false, //场景模式
    selectionIndicator: false, //选取指示器组件
    timeline: false, //时间轴
    navigationHelpButton: false, //帮助按钮
    navigationInstructionsInitiallyVisible: false
  })

  viewer._cesiumWidget._creditContainer.style.display = 'none'

  function loadGaodeMap() {
    // 添加高德影像图
    let imgLayer = new Cesium.UrlTemplateImageryProvider({
      url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      layer: 'imgLayer',
      minimumLevel: 3,
      maximumLevel: 18
    })
    viewer.imageryLayers.addImageryProvider(imgLayer)

    // 影像注记
    let annoLayer = new Cesium.UrlTemplateImageryProvider({
      url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
      layer: 'annoLayer',
      style: 'default'
      //format: "image/jpeg",
      //tileMatrixSetID: "GoogleMapsCompatible"
    })
    viewer.imageryLayers.addImageryProvider(annoLayer)
  }

  loadGaodeMap()
})
</script>

<style scoped>
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
